<script setup>
import { ref, reactive, toRefs, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { inspectionTask } from "@/api/inspection/task-manage.js";
import {
  inspectionAudio,
  inspectionMap,
} from "@/api/inspection/resource-manage.js";
import { inspectionRoute } from "@/api/inspection/map-setting.js";

// 接收props
const props = defineProps({
  visible: { type: Boolean, default: false },
  status: { type: Number, default: 0 },
  formData: { type: Object, default: () => ({}) },
});
const { visible, status, formData } = toRefs(props);
const emit = defineEmits(["update:visible", "refreshData", "initFormData"]);

// 关闭弹窗
function onCloseDialog() {
  emit("update:visible", false);
  emit("initFormData");
  ruleFormRef.value.resetFields();
}

const mapData = ref([]);
const audioData = ref([]);
const routeData = ref([]);

watch(
  () => formData.value.mid,
  async () => {
    const {
      data: { list: routeList },
    } = await inspectionRoute.read({ mid: formData.value.mid });
    routeData.value = routeList;
  }
);

watch(visible, async (val) => {
  if (val) {
    const {
      data: { list: mapList },
    } = await inspectionMap.read();
    mapData.value = mapList;
    const {
      data: { list: audioList },
    } = await inspectionAudio.read();
    audioData.value = audioList;
    if (status.value !== 0) {
      formData.value.tid = Number(formData.value.tid);
      if (formData.value.type === 1) {
        const {
          data: { list: routeList },
        } = await inspectionRoute.read({ mid: formData.value.mid });
        routeData.value = routeList;
      }
    }
  }
});

// 表单校验规则
const ruleFormRef = ref();
const rules = reactive({
  name: { required: true, message: "该选项不能为空", trigger: "blur" },
  type: { required: true, message: "该选项不能为空", trigger: "blur" },
  mid: { required: true, message: "该选项不能为空", trigger: "blur" },
  tid: { required: true, message: "该选项不能为空", trigger: "blur" },
  time: { required: true, message: "该选项不能为空", trigger: "blur" },
  startTime: { required: true, message: "该选项不能为空", trigger: "blur" },
  endTime: { required: true, message: "该选项不能为空", trigger: "blur" },
  condition: { required: true, message: "该选项不能为空", trigger: "blur" },
});

// 激活条件
const condition = [
  { id: 0, name: "单次" },
  { id: 1, name: "每天" },
  { id: 2, name: "工作日" },
  { id: 3, name: "节假日" },
];

async function onSubmit(formEl) {
  if (!formEl) return;
  // 表单校验
  await formEl.validate(async (valid) => {
    if (valid) {
      await ElMessageBox.confirm("确认继续操作吗", "警告", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
      });
      if (status.value === 0) {
        const { message } = await inspectionTask.create(formData.value);
        ElMessage({ type: "success", message });
      } else if (status.value === 1) {
        const { message } = await inspectionTask.update(formData.value);
        ElMessage({ type: "success", message });
      } else if (status.value === 2) {
        delete formData.value.id;
        const { message } = await inspectionTask.create(formData.value);
        ElMessage({ type: "success", message });
      }
      onCloseDialog();
      emit("refreshData");
    }
  });
}
</script>

<template>
  <el-dialog
    :model-value="visible"
    title="任务模板"
    width="640px"
    :close-on-click-modal="false"
    :show-close="false"
    @close="onCloseDialog()"
  >
    <el-form
      ref="ruleFormRef"
      :rules="rules"
      :model="formData"
      label-width="100px"
      label-suffix="："
    >
      <el-form-item label="任务名称" prop="name">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item v-if="status === 0" label="任务类型" prop="type">
        <el-radio-group v-model="formData.type">
          <el-radio :label="1">巡检任务</el-radio>
          <el-radio :label="0">广播任务</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="formData.type === 1" label="任务地图" prop="mid">
        <el-select v-model="formData.mid" @change="formData.tid = null">
          <el-option
            v-for="item in mapData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="formData.type === 1" label="任务路径" prop="tid">
        <el-select v-model="formData.tid">
          <el-option
            v-for="item in routeData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="formData.type === 0" label="广播音频" prop="tid">
        <el-select v-model="formData.tid">
          <el-option
            v-for="item in audioData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="任务次数" prop="time">
        <el-input v-model="formData.time" />
      </el-form-item>
      <el-form-item label="任务时间" required>
        <el-form-item prop="startTime">
          <el-date-picker
            v-model="formData.startTime"
            value-format="YYYY-MM-DD HH:mm:ss"
            class="!w-[240px] mr-5"
            type="datetime"
            placeholder="开始时间"
          />
        </el-form-item>
        <el-form-item prop="endTime">
          <el-date-picker
            v-model="formData.endTime"
            value-format="YYYY-MM-DD HH:mm:ss"
            class="!w-[240px]"
            type="datetime"
            placeholder="结束时间"
          />
        </el-form-item>
      </el-form-item>
      <el-form-item label="激活条件" prop="condition">
        <el-select v-model="formData.condition" class="w-full">
          <el-option
            v-for="item in condition"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit(ruleFormRef)">
          确认
        </el-button>
        <el-button @click="onCloseDialog()">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
